<template>
  <div id="app">
    <Navigation>
      <img slot="left" src="./assets/navigation/back.png">
      <div slot="center">{{ShowTitle}}</div>
      <img slot="right" src="./assets/navigation/scan.png">
    </Navigation>
    <router-view/>
    <Tabbar>
      <TabbarItem path="/">
        <img slot="icon" src="./assets/tabber/home.png">
        <img slot="icon_active" src="./assets/tabber/home_active.png">
        <div slot="title">首页</div>
      </TabbarItem>
      <TabbarItem path="/classify">
        <img slot="icon" src="./assets/tabber/classify.png" >
        <img slot="icon_active" src="./assets/tabber/classify_active.png">
        <div slot="title">分类</div>
      </TabbarItem>
      <TabbarItem path="/cart">
        <img slot="icon" src="./assets/tabber/cart.png" >
        <img slot="icon_active" src="./assets/tabber/cart_active.png">
        <div slot="title">购物车</div>
      </TabbarItem>
      <TabbarItem path="/mine">
        <img slot="icon" src="./assets/tabber/mine.png" >
        <img slot="icon_active" src="./assets/tabber/mine_active.png">
        <div slot="title">我的</div>
      </TabbarItem>
    </Tabbar>
  </div>
</template>
<script>
import Navigation from "./components/navigation/Navigation";//引入导航组件
import Tabbar from "./components/tabbar/Tabbar.vue";//引入底部tabbar组件
import TabbarItem from "./components/tabbar/TabbarItem";
export default {
  components:{
    Navigation,//顶部导航组件
    Tabbar,//底部tabbar组件（容器盒子）
    TabbarItem,//底部tabbar组件中每块拆分出去
  },
  computed: {
    ShowTitle(){
      return this.$route.meta.title
    }
  },

}
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
</style>
